// src/components/Header.jsx
import { Layout, Dropdown } from "antd";
import type { MenuProps } from 'antd';
import { useAuth } from "../contexts/AuthContext";
import { useState } from "react";
import UserProfileModal from "./UserProfileModal";

const { Header } = Layout;

export default function RocsunHeader() {
  const { authUser, logout } = useAuth();
  const [ profileModalVisible, setProfileModalVisible ] = useState(false);
  
  const items: MenuProps['items'] = [
    {
      key: '1',
      label: '个人中心',
      onClick: () => setProfileModalVisible(true)
    },
    {
      key: '2',
      label: '退出登录',
      onClick: logout
    }
  ];

  return (
    <>
      <Header
        style={{
          background: "#fff",
          height: "60px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0 20px",
          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
        }}
      >
        <h3 style={{ margin: 0 }}>Rocsun 管理系统</h3>
        <Dropdown menu={{ items }} placement="bottom">
          <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
            <span style={{ marginRight: 8 }}>👤 {authUser?.nickName || authUser?.userName || '用户'}</span>
          </div>
        </Dropdown>
      </Header>

      <UserProfileModal 
        visible={profileModalVisible} 
        onClose={() => setProfileModalVisible(false)} 
      />
    </>
  );
}